<template>
	<div>
		<my-table ref="tableObj" :customCells="customCells" :title="title" :fields="fields" :selectable="selectable" :selectMode="selectMode" :index="indexable"
		 :oprable="oprable" :items="items" :oprs="oprs" @do-query="queryItems" @do-reset-query="resetQueryItems"
		 @table-alert-dismissed-success="tableAlertDismissedSuccess" @item-view="itemView" @item-new="itemNew" @item-update="itemUpdate"
		 @items-delete="itemsDelete" @item-delete="itemDelete">
			<template v-slot:more-actions="{row}">
				<b-button size="sm" class="mr-1" variant="info" title="添加子目录" v-b-tooltip.hover @click="addChild(row.item)">
					<b-icon icon="node-plus"></b-icon>
				</b-button>
			</template>
			
			<template v-slot:custom-cells-cell(name)="{data}">
				<span :style="{paddingLeft: ((data.item.lv) * 2) + 'rem'}">{{data.item.name}}</span>
			</template>
			
		</my-table>
	</div>
</template>

<script>
	import MyTable from '../commons/Table.vue'
	import axios from 'axios'
	import gl from '../commons/global_variable.js'
	import wg from '../commons/utils.js'

	export default {
		name: "Catalogs",
		components: {
			MyTable
		},
		data: function() {
			return {
				title: "分类目录",
				selectable: false,
				selectMode: 'single',
				oprable: true,
				indexable: true,
				oprs: {
					new: true,
					del: true,
					update: true,
					cupdate: false,
					view: true
				},
				query: {
					name: '',
					aliasName: ''
				},
				items: [],
				fields: [{
					key: "name",
					label: "名称"
				}, {
					key: "aliasName",
					label: "别名"
				}, {
					key: "articlesCount",
					label: "文章数量"
				}, {
					key: "remark",
					label: "描述"
				}],
				customCells: [
					"cell(name)"
				]
			}
		},
		created: function() {
			this.$store.commit('menuFoucsOpr', 'catalog')
			this.getItems()
		},
		methods: {
			addChild: function(item) {
				this.$router.push({
					name: "catalog-details",
					params: {
						title: "新建",
						parentId: item.id
					}
				})
			},
			getItems: function() {
				wg.utils.axiosGet.call(this, 'catalog/list', function(res){
					this.items = res.data
				}, function(){
					this.$refs.tableObj.onAnyError('查询分类目录失败')
				})
			},
			queryItems: function() {
				this.getItems()
			},
			resetQueryItems: function() {
				this.query.name = ''
				this.query.aliasName = ''
				this.getItems()
			},
			itemsDelete: function(items) {
				console.log("itemsDelete", items)
			},
			itemDelete: function(item) {
				var that = this
				axios.get(gl.cms_args.server_url + 'catalog/del?id=' + item.id).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.$refs.tableObj.onDeleteSuccess()
					} else {
						that.$refs.tableObj.onDeleteError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onDeleteError()
				})
			},
			itemNew: function(parent) {
				this.$router.push({
					name: "catalog-details",
					params: {
						title: "新建",
						parentId: parent ? parent.id : null
					}
				})
			},
			itemUpdate: function(item) {
				this.$router.push({
					name: "catalog-details",
					params: {
						title: "修改",
						id: item.id
					}
				})
			},
			itemView: function(item) {
				this.$router.push({
					name: "catalog-details",
					params: {
						title: "查看",
						id: item.id,
						readonly: true
					}
				})
			},
			tableAlertDismissedSuccess: function() {
				this.getItems()
			}
		}
	}
</script>

<style>
</style>
